<template>
  <div class="payment-detail-page">
    <!-- 顶部导航 -->
    <van-nav-bar 
      title="支付详情" 
      left-arrow 
      @click-left="goBack"
    />
    
    <!-- 加载状态 -->
    <van-loading v-if="loading" class="page-loading">
      加载中...
    </van-loading>
    
    <!-- 详情内容 -->
    <div v-if="!loading && paymentDetail" class="detail-content">
      <!-- 状态卡片 -->
      <div class="status-card">
        <div class="status-header">
          <div class="status-tag" :class="paymentDetail.status">
            {{ getStatusText(paymentDetail.status) }}
          </div>
        </div>
        <div class="status-info">
          <div class="order-details">
            <span class="order-no">订单号：{{ paymentDetail.order_no || paymentDetail.orderNo }}</span>
            <span class="order-amount">订单金额：¥{{ formatOrderAmount(paymentDetail.amount || paymentDetail.totalAmount || 0) }}</span>
          </div>
          <van-button 
            type="primary" 
            size="small" 
            @click="copyOrderNo"
            class="copy-btn"
          >
            复制
          </van-button>
        </div>
      </div>
      
      <!-- 商品信息 -->
      <div class="product-card">
        <div class="card-header">
          <span class="card-title">商品信息</span>
        </div>
        <div class="product-info">
          <img 
            class="product-image" 
            :src="paymentDetail.product_image || paymentDetail.productImage || 'https://via.placeholder.com/80x80'" 
            alt="商品图片"
          />
          <div class="product-details">
            <div class="product-title">{{ paymentDetail.product_title || paymentDetail.productTitle }}</div>
            <div class="product-price">¥{{ formatOrderAmount(paymentDetail.amount || paymentDetail.totalAmount || 0) }}</div>
          </div>
        </div>
      </div>
      
      <!-- 买家信息 -->
      <div class="buyer-card">
        <div class="card-header">
          <span class="card-title">买家信息</span>
        </div>
        <div class="buyer-info">
          <div class="info-item">
            <span class="info-label">支付时间：</span>
            <span class="info-value">{{ formatTime(paymentDetail.create_time || paymentDetail.createTime) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 支付凭证识别结果 -->
      <div v-if="paymentDetail.recognition_result || paymentDetail.recognitionResult" class="recognition-card">
        <div class="card-header">
          <span class="card-title">支付凭证识别结果</span>
        </div>
        <div class="recognition-info">
          <div class="info-item">
            <span class="info-label">识别订单号：</span>
            <span class="info-value">{{ getRecognitionValue('orderNumber') || '未识别' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">识别金额：</span>
            <span class="info-value">¥{{ formatRecognitionAmount(getRecognitionValue('paymentAmount')) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">收款商户：</span>
            <span class="info-value">{{ getRecognitionValue('payeeName') || '未识别' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">支付方式：</span>
            <span class="info-value">{{ getRecognitionValue('paymentMethod') || '未识别' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">支付时间：</span>
            <span class="info-value">{{ formatRecognitionTime(getRecognitionValue('paymentTime')) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">识别置信度：</span>
            <span class="info-value">{{ formatConfidence(getRecognitionValue('confidence')) }}</span>
          </div>
        </div>
      </div>

      <!-- 支付凭证视频 -->
      <div v-if="paymentDetail.video_url || paymentDetail.videoUrl" class="video-card">
        <div class="card-header">
          <span class="card-title">支付凭证视频</span>
        </div>
        <div class="video-container">
          <video 
            ref="paymentVideo"
            :src="paymentDetail.video_url || paymentDetail.videoUrl"
            controls
            preload="metadata"
            class="payment-video"
            @error="onVideoError"
            @loadedmetadata="onVideoLoadedMetadata"
          >
            您的浏览器不支持视频播放
          </video>
          <div class="video-actions">
            <van-button 
              type="primary" 
              size="small"
              @click="playVideo"
              class="play-btn"
            >
              播放视频
            </van-button>
            <van-button 
              type="default" 
              size="small"
              @click="downloadVideo"
              class="download-btn"
            >
              下载视频
            </van-button>
          </div>
        </div>
      </div>

      <!-- 支付凭证图片（兼容旧版本，仅在没有视频时显示） -->
      <div v-if="!paymentDetail.video_url && !paymentDetail.videoUrl && paymentDetail.payment_proof_images && paymentDetail.payment_proof_images.length > 0" class="proof-card">
        <div class="card-header">
          <span class="card-title">支付凭证图片</span>
        </div>
        <div class="proof-images">
          <div 
            v-for="(image, index) in paymentDetail.payment_proof_images" 
            :key="index"
            class="image-item"
            @click="previewImage(index)"
          >
            <img class="proof-image" :src="image" alt="支付凭证" />
          </div>
        </div>
      </div>
      
      <!-- 拒绝原因 -->
      <div v-if="paymentDetail.status === 'rejected' && paymentDetail.rejectReason" class="reason-card">
        <div class="card-header">
          <span class="card-title">拒绝原因</span>
        </div>
        <div class="reason-content">
          <span class="reason-text">{{ paymentDetail.rejectReason }}</span>
        </div>
      </div>
      
      <!-- 拒绝记录 -->
      <div v-if="paymentDetail?.status === 'rejected'" class="detail-card">
        <div class="card-title">拒绝记录</div>
        
        <!-- 调试信息 -->
        
        <div v-if="paymentDetail?.rejection_records && paymentDetail.rejection_records.length > 0" class="rejection-info">
          <div v-for="(record, index) in paymentDetail.rejection_records" :key="index" class="rejection-record">
            <div class="record-header">
              <span class="record-number">拒绝记录 #{{ index + 1 }}</span>
              <span class="record-time">{{ record.reject_time }}</span>
            </div>
            <div class="rejection-reason">
              <span class="label">拒绝原因：</span>
              <span class="value">{{ record.reject_reason || '暂无' }}</span>
            </div>
          </div>
        </div>
        
        <div v-else class="no-rejection-records">
          <p>暂无拒绝记录</p>
        </div>
        
        <!-- 买方重新上传支付凭证按钮 -->
        <div v-if="isBuyerPerspective && paymentDetail?.status === 'rejected'" class="reupload-section">
          <van-button 
            type="primary" 
            size="large" 
            block 
            @click="showReuploadDialog = true"
            class="reupload-btn"
          >
            重新上传支付凭证视频
          </van-button>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div v-if="paymentDetail.status === 'pending'" class="action-buttons">
        <!-- 卖家视角：可以确认或拒绝支付 -->
        <template v-if="!isBuyerPerspective">
          <van-button 
            type="success" 
            size="large"
            @click="confirmPayment"
            class="action-btn confirm-btn"
          >
            确认支付
          </van-button>
          <van-button 
            type="danger" 
            size="large"
            @click="rejectPayment"
            class="action-btn reject-btn"
          >
            拒绝支付
          </van-button>
        </template>
        
        <!-- 买家视角：待确认状态下显示提示信息 -->
        <template v-if="isBuyerPerspective">
          <div class="buyer-pending-info">
            <van-icon name="info-o" color="#1989fa" />
            <span>{{ getPaymentProofText() }}</span>
          </div>
        </template>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-if="!loading && !paymentDetail" class="empty-state">
      <van-empty description="支付详情不存在" />
    </div>
    
    <!-- 图片预览 -->
    <van-image-preview
      v-model:show="showImagePreview"
      :images="previewImages"
      :start-position="currentImageIndex"
      @close="closeImagePreview"
    />
    
    <!-- 自定义金额输入弹窗 -->
    <van-popup 
      v-model:show="showAmountDialog" 
      position="center" 
      :style="{ width: '90%', maxWidth: '400px', borderRadius: '12px' }"
      @close="handleAmountDialogClose"
    >
      <div class="amount-input-dialog">
        <div class="dialog-header">
          <h3>输入支付金额</h3>
          <p>请根据支付截图输入实际收到的金额</p>
        </div>
        <div class="dialog-content">
          <van-field
            v-model="amountInputValue"
            type="number"
            label="支付金额"
            placeholder="请输入收到的金额"
            :formatter="formatAmount"
            :parser="parseAmount"
            clearable
          >
            <template #prefix>¥</template>
          </van-field>
          <div class="amount-hint">
            订单金额：¥{{ formatOrderAmount(paymentDetail?.amount || paymentDetail?.totalAmount || 0) }}
          </div>
        </div>
        <div class="dialog-footer">
          <van-button @click="showAmountDialog = false" size="large">取消</van-button>
          <van-button 
            type="primary" 
            @click="handleAmountConfirm" 
            size="large"
            :disabled="!amountInputValue || parseFloat(amountInputValue) <= 0"
          >
            下一步
          </van-button>
        </div>
      </div>
    </van-popup>

    <!-- 自定义拒绝支付弹窗 -->
    <van-popup
      v-model:show="showRejectDialog"
      position="center"
      :style="{ width: '90%', maxWidth: '400px', borderRadius: '12px' }"
      @close="closeRejectDialog"
    >
      <div class="reject-dialog-content">
        <div class="dialog-header">
          <h3>拒绝支付</h3>
          <p>请输入拒绝原因</p>
        </div>
        <div class="dialog-content">
          <van-field
            v-model="rejectReason"
            type="text"
            label="拒绝原因"
            placeholder="请输入拒绝原因"
            clearable
          />
        </div>
        <div class="dialog-footer">
          <van-button @click="closeRejectDialog" size="large">取消</van-button>
          <van-button 
            type="primary" 
            @click="handleRejectConfirm" 
            size="large"
            :disabled="!rejectReason.trim()"
          >
            确认拒绝
          </van-button>
        </div>
    </div>
    </van-popup>
    
    <!-- 重新上传支付凭证对话框 -->
    <van-popup 
      v-model:show="showReuploadDialog" 
      position="bottom" 
      :style="{ height: '60%' }"
      round
    >
      <div class="reupload-dialog-content">
        <div class="dialog-header">
          <h3>重新上传支付凭证视频</h3>
          <van-icon name="cross" @click="closeReuploadDialog" />
        </div>
        
        <div class="upload-section">
          <van-uploader
            v-model="reuploadImages"
            :after-read="afterRead"
            :before-delete="beforeDelete"
            :max-count="1"
            :preview-size="80"
            accept="video/*"
            class="uploader"
          />
          <div class="upload-tip">请上传清晰的支付凭证视频，支持mp4、mov格式</div>
        </div>
        
        <div class="dialog-actions">
          <van-button 
            type="default" 
            size="large" 
            @click="closeReuploadDialog"
            class="cancel-btn"
          >
            取消
          </van-button>
          <van-button 
            type="primary" 
            size="large" 
            @click="handleReuploadConfirm"
            :disabled="reuploadImages.length === 0"
            class="confirm-btn"
          >
            确认上传视频
          </van-button>
        </div>
    </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showConfirmDialog, showDialog } from 'vant'
import { 
  getPaymentDetail, 
  confirmPayment as confirmPaymentApi, 
  rejectPayment as rejectPaymentApi,
  reuploadPaymentProof
} from '@/api/payment-confirm'

const router = useRouter()
const route = useRoute()

// 响应式数据
const paymentDetail = ref(null)
const loading = ref(true)
const paymentVideo = ref(null)

// 图片预览相关
const showImagePreview = ref(false)
const previewImages = ref([])
const currentImageIndex = ref(0)

// 自定义金额输入弹窗
const showAmountDialog = ref(false)
const amountInputValue = ref('')

// 拒绝支付相关的响应式变量
const showRejectDialog = ref(false)
const rejectReason = ref('')
const isAmountMismatch = ref(false)
const receivedAmount = ref('')

// 买方重新上传支付凭证弹窗
const showReuploadDialog = ref(false)
const reuploadImages = ref([])

// 当前视角（买家或卖家）
const isBuyerPerspective = ref(false)

// 加载支付详情
const loadPaymentDetail = async () => {
  try {
    loading.value = true
    const paymentId = route.query.id || route.params.id
    
    if (!paymentId) {
      showToast('支付ID不存在')
      return
    }
    
    console.log('加载支付详情，ID:', paymentId)
    
    // 从路由参数或查询参数获取视角信息
    const perspective = route.query.perspective || route.params.perspective || 'seller'
    console.log('当前视角:', perspective)
    
    const detail = await getPaymentDetail(paymentId, { perspective })
    console.log('支付详情:', detail)
    console.log('识别结果:', detail.recognition_result)
    console.log('视频URL:', detail.video_url)
    
    paymentDetail.value = detail
    previewImages.value = detail.payment_proof_images || detail.paymentProofImages || []
    
    // 设置当前视角
    isBuyerPerspective.value = perspective === 'buyer'
  } catch (e) {
    console.error('加载支付详情失败:', e)
    showToast('加载失败')
  } finally {
    loading.value = false
  }
}

// 确认支付
const confirmPayment = async () => {
  try {
    // 使用自定义的金额输入对话框
    const confirmedAmount = await showAmountInputDialog()
    
    if (confirmedAmount && confirmedAmount !== 'cancel') {
      const expectedAmount = paymentDetail.value?.amount || paymentDetail.value?.totalAmount || 0
      const inputAmount = parseFloat(confirmedAmount)
      
      // 第二步：显示金额确认对话框
      let shouldConfirm = true
      
      // 如果金额不匹配，先询问是否继续
      if (Math.abs(inputAmount - expectedAmount) > 0.01) {
        const continueConfirm = await showConfirmDialog({
          title: '金额不匹配',
          message: `输入金额 ¥${inputAmount.toFixed(2)} 与订单金额 ¥${expectedAmount.toFixed(2)} 不匹配，是否继续？`,
          confirmButtonText: '继续确认',
          cancelButtonText: '重新输入'
        })
        
        if (!continueConfirm) {
          // 用户选择重新输入，递归调用
          return confirmPayment()
        }
      }
      
      // 第三步：最终确认对话框
      const finalConfirm = await showConfirmDialog({
        title: '确认支付',
        message: `确认收到买家支付 ¥${inputAmount.toFixed(2)} 吗？\n\n订单金额：¥${expectedAmount.toFixed(2)}\n实际收到：¥${inputAmount.toFixed(2)}`,
        confirmButtonText: '确认支付',
        cancelButtonText: '取消'
      })
      
      if (finalConfirm) {
        const paymentId = route.query.id || route.params.id
        const data = {
          order_id: paymentId,
          action: 'confirm',
          pay_amount: inputAmount,
          remark: '卖家确认支付'
        }
        
        await confirmPaymentApi(paymentId, data)
        showToast('确认成功')
        
        // 返回上一页并刷新
        setTimeout(() => {
          router.back()
        }, 1500)
      }
    }
  } catch (e) {
    if (e !== 'cancel') {
      console.error('确认支付失败:', e)
      showToast('确认失败')
    }
  }
}

// 自定义金额输入对话框
const showAmountInputDialog = () => {
  return new Promise((resolve) => {
    amountInputValue.value = formatOrderAmount(paymentDetail.value?.amount || paymentDetail.value?.totalAmount || 0)
    showAmountDialog.value = true
    
    // 存储resolve函数，供后续使用
    window.amountDialogResolve = resolve
  })
}

// 处理金额确认
const handleAmountConfirm = () => {
  const value = amountInputValue.value
  if (value && !isNaN(parseFloat(value))) {
    window.amountDialogResolve(value)
    showAmountDialog.value = false
  } else {
    showToast('请输入有效的金额')
  }
}

// 金额格式化
const formatAmount = (value) => {
  // 只允许数字和小数点，最多两位小数
  return value.replace(/[^\d.]/g, '').replace(/(\..*)\./g, '$1').replace(/(\..{2})./g, '$1')
}

// 金额解析
const parseAmount = (value) => {
  return value
}

// 拒绝支付
const rejectPayment = async () => {
  try {
    // 显示自定义拒绝支付对话框
    showRejectDialog.value = true
  } catch (e) {
    console.error('拒绝支付失败:', e)
    showToast('拒绝失败')
  }
}

// 处理拒绝确认
const handleRejectConfirm = async () => {
  if (!rejectReason.value.trim()) {
    showToast('请输入拒绝原因')
    return
  }
  
  try {
    let rejectData = {
      order_id: route.query.id || route.params.id,
      action: 'reject',
      reject_reason: rejectReason.value.trim()
    }
    

    
    // 如果是因为金额不匹配而拒绝，添加收到的金额
    if (isAmountMismatch.value && receivedAmount.value) {
      rejectData.pay_amount = parseFloat(receivedAmount.value)
    }
    
    await rejectPaymentApi(rejectData.order_id, rejectData)
    showToast('拒绝成功')
    
    // 关闭对话框
    showRejectDialog.value = false
    
    // 清空表单
    rejectReason.value = ''
    isAmountMismatch.value = false
    receivedAmount.value = ''
    
    // 返回上一页并刷新
    setTimeout(() => {
      router.back()
    }, 1500)
  } catch (e) {
    console.error('拒绝支付失败:', e)
    showToast('拒绝失败')
  }
}

// 关闭拒绝对话框
const closeRejectDialog = () => {
  showRejectDialog.value = false
  // 清空表单
  rejectReason.value = ''
  isAmountMismatch.value = false
  receivedAmount.value = ''
}

// 文件上传后的处理
const afterRead = async (file) => {
  try {
    console.log('开始上传文件:', file)
    
    // 创建FormData对象
    const formData = new FormData()
    formData.append('file', file.file)
    formData.append('folder', 'payment-proof/') // 指定上传文件夹
    
    // 调用文件上传API
    const response = await fetch('/v1/file/upload', {
      method: 'POST',
      body: formData,
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
      }
    })
    
    const result = await response.json()
    
    if (result.success) {
      console.log('文件上传成功:', result.url)
      // 更新文件对象，保存上传后的URL
      file.url = result.url
      showToast('文件上传成功')
    } else {
      console.error('文件上传失败:', result.message)
      showToast('文件上传失败: ' + result.message)
      // 从上传列表中移除失败的文件
      const index = reuploadImages.value.findIndex(item => item === file)
      if (index > -1) {
        reuploadImages.value.splice(index, 1)
      }
    }
  } catch (error) {
    console.error('文件上传异常:', error)
    showToast('文件上传异常')
    // 从上传列表中移除失败的文件
    const index = reuploadImages.value.findIndex(item => item === file)
    if (index > -1) {
      reuploadImages.value.splice(index, 1)
    }
  }
}

// 删除文件前的处理
const beforeDelete = (file, detail) => {
  console.log('删除文件:', file, detail)
  return true
}

// 确认重新上传
const handleReuploadConfirm = async () => {
  if (reuploadImages.value.length === 0) {
    showToast('请先选择要上传的视频')
    return
  }
  
  try {
    const file = reuploadImages.value[0]
    
    // 检查文件是否已上传成功（有URL）
    if (!file.url) {
      showToast('请等待视频上传完成')
      return
    }
    
    console.log('开始重新上传支付凭证视频:', file.url)
    
    // 准备请求数据
    const requestData = {
      payImage: file.url
    }
    console.log('请求数据:', requestData)
    
    // 调用重新上传API
    const response = await reuploadPaymentProof(paymentDetail.value.id, requestData)
    console.log('重新上传API响应:', response)
    
    showToast('重新上传成功，等待卖家确认')
    closeReuploadDialog()
    
    // 重新加载支付详情
    await loadPaymentDetail()
    
    // 显示成功提示
    showToast('支付凭证视频已重新上传，订单状态已重置为待确认')
    
  } catch (error) {
    console.error('重新上传失败:', error)
    showToast('重新上传失败')
  }
}

const closeReuploadDialog = () => {
  showReuploadDialog.value = false
  reuploadImages.value = []
}

// 预览图片
const previewImage = (index) => {
  currentImageIndex.value = index
  showImagePreview.value = true
}

// 关闭图片预览
const closeImagePreview = () => {
  showImagePreview.value = false
}

// 复制订单号
const copyOrderNo = async () => {
  const orderNo = paymentDetail.value?.order_no || paymentDetail.value?.orderNo
  if (orderNo) {
    try {
      await navigator.clipboard.writeText(orderNo)
      showToast('已复制订单号')
    } catch (e) {
      // 降级方案
      const textArea = document.createElement('textarea')
      textArea.value = orderNo
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
      showToast('已复制订单号')
    }
  }
}

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return ''
  
  let date
  if (typeof timestamp === 'string') {
    date = new Date(timestamp)
  } else if (typeof timestamp === 'number') {
    date = new Date(timestamp)
  } else {
    return timestamp
  }
  
  if (isNaN(date.getTime())) {
    return timestamp
  }
  
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待确认',
    'confirmed': '已确认',
    'rejected': '已拒绝'
  }
  return statusMap[status] || status
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 组件挂载时加载数据
onMounted(() => {
  loadPaymentDetail()
})

// 处理自定义金额输入弹窗关闭
const handleAmountDialogClose = () => {
  showAmountDialog.value = false
  // 如果用户取消，则Promise拒绝
  window.amountDialogResolve('cancel')
}

// 格式化订单金额
const formatOrderAmount = (amount) => {
  if (!amount) return '0.00'
  // 数据库中价格以元为单位存储，直接格式化
  return parseFloat(amount).toFixed(2)
}

// 格式化识别金额（分转元）
const formatRecognitionAmount = (amountInCents) => {
  if (!amountInCents) return '0.00'
  return (amountInCents / 100).toFixed(2)
}

// 格式化识别时间
const formatRecognitionTime = (timeStr) => {
  if (!timeStr) return '未识别'
  return timeStr
}

// 格式化置信度
const formatConfidence = (confidence) => {
  if (!confidence) return '未知'
  return `${(confidence * 100).toFixed(1)}%`
}

// 播放视频
const playVideo = () => {
  if (paymentVideo.value) {
    paymentVideo.value.play()
  }
}

// 下载视频
const downloadVideo = () => {
  const videoUrl = paymentDetail.value?.video_url || paymentDetail.value?.videoUrl
  if (videoUrl) {
    const link = document.createElement('a')
    link.href = videoUrl
    link.download = `支付凭证_${paymentDetail.value.order_no || paymentDetail.value.orderNo || 'unknown'}.mp4`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    showToast('开始下载视频')
  }
}

// 视频加载错误处理
const onVideoError = (event) => {
  console.error('视频加载错误:', event)
  showToast('视频加载失败')
}

// 视频元数据加载完成
const onVideoLoadedMetadata = (event) => {
  console.log('视频元数据加载完成:', event.target.duration)
}

// 获取识别结果值（兼容不同数据格式）
const getRecognitionValue = (fieldName) => {
  if (!paymentDetail.value) return null
  
  // 尝试从recognitionResult对象中获取（驼峰格式）
  if (paymentDetail.value.recognitionResult && paymentDetail.value.recognitionResult[fieldName]) {
    return paymentDetail.value.recognitionResult[fieldName]
  }
  
  // 尝试从recognition_result对象中获取（下划线格式）
  if (paymentDetail.value.recognition_result && paymentDetail.value.recognition_result[fieldName]) {
    return paymentDetail.value.recognition_result[fieldName]
  }
  
  // 尝试从下划线格式的字段名获取
  const snakeCaseFieldName = fieldName.replace(/([A-Z])/g, '_$1').toLowerCase()
  if (paymentDetail.value.recognition_result && paymentDetail.value.recognition_result[snakeCaseFieldName]) {
    return paymentDetail.value.recognition_result[snakeCaseFieldName]
  }
  
  return null
}

// 获取支付凭证提示文本
const getPaymentProofText = () => {
  if (!paymentDetail.value) return '支付凭证已上传，等待卖家确认'
  
  // 检查是否有视频
  if (paymentDetail.value.video_url || paymentDetail.value.videoUrl) {
    return '支付凭证视频已上传，等待卖家确认'
  }
  
  // 检查是否有图片
  if (paymentDetail.value.payment_proof_images && paymentDetail.value.payment_proof_images.length > 0) {
    return '支付凭证图片已上传，等待卖家确认'
  }
  
  return '支付凭证已上传，等待卖家确认'
}
</script>

<style lang="scss" scoped>
.payment-detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

.page-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.detail-content {
  padding: 10px;
}

.status-card,
.product-card,
.buyer-card,
.proof-card,
.reason-card,
.recognition-card,
.video-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  
  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}

.status-card {
  .status-header {
    padding: 20px 20px 15px;
    border-bottom: 1px solid #f0f0f0;
    
    .status-tag {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      
      &.pending {
        background: #fa8c16;
      }
      
      &.confirmed {
        background: #52c41a;
      }
      
      &.rejected {
        background: #ff4d4f;
      }
    }
  }
  
  .status-info {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .order-details {
      display: flex;
      flex-direction: column;
      gap: 5px;
      
      .order-no {
        font-size: 14px;
        color: #666;
      }
      
      .order-amount {
    font-size: 14px;
    color: #666;
  }
}

    .copy-btn {
      border-radius: 20px;
      font-size: 12px;
    }
  }
}

.product-card {
  .product-info {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    
    .product-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .product-details {
      flex: 1;
      
      .product-title {
    font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
        line-height: 1.4;
      }
      
      .product-price {
        font-size: 18px;
    font-weight: bold;
        color: #ff4d4f;
      }
    }
  }
}

.buyer-card {
  .buyer-info {
    padding: 20px;
    
    .info-item {
      display: flex;
      align-items: center;
      
      .info-label {
        font-size: 14px;
        color: #666;
        margin-right: 10px;
      }
      
      .info-value {
        font-size: 14px;
    color: #333;
      }
    }
  }
}

.proof-card {
  .proof-images {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    .image-item {
      cursor: pointer;
      transition: transform 0.2s ease;
      
      &:hover {
        transform: scale(1.05);
      }
      
      .proof-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.reason-card {
  .reason-content {
    padding: 20px;
    
    .reason-text {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }
}

.recognition-card {
  .recognition-info {
    padding: 20px;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .info-label {
        font-size: 14px;
        color: #666;
        font-weight: 500;
        min-width: 100px;
      }
      
      .info-value {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        text-align: right;
        flex: 1;
        margin-left: 15px;
      }
    }
  }
}

.video-card {
  .video-container {
    padding: 20px;
    
    .payment-video {
      width: 100%;
      max-height: 300px;
      border-radius: 8px;
      background: #000;
      margin-bottom: 15px;
    }
    
    .video-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      
      .van-button {
        border-radius: 20px;
        font-weight: 500;
        min-width: 100px;
        height: 36px;
        
        &.play-btn {
          background: #52c41a;
          border-color: #52c41a;
          box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
        }
        
        &.download-btn {
          background: #1890ff;
          border-color: #1890ff;
          box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
        }
      }
    }
  }
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  
  .action-btn {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    font-size: 16px;
    
    &.confirm-btn {
      background: #07c160;
      border-color: #07c160;
    }
    
    &.reject-btn {
      background: #ee0a24;
      border-color: #ee0a24;
    }
  }
  
  .buyer-pending-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    color: #0369a1;
    font-size: 14px;
    
    .van-icon {
      font-size: 16px;
    }
  }
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
}

/* 自定义金额输入弹窗样式 */
.amount-input-dialog {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .dialog-header {
    text-align: center;
    h3 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin: 0 0 8px 0;
    }
    p {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }

  .dialog-content {
    .van-field {
      margin-bottom: 10px;
      
      .van-field__label {
        width: 80px;
        color: #333;
        font-weight: 500;
      }
      
      .van-field__body {
        .van-field__control {
          text-align: right;
          padding-right: 10px;
          font-size: 16px;
          color: #333;
        }
      }
    }
    
    .amount-hint {
      font-size: 12px;
      color: #999;
      text-align: right;
      margin-top: 5px;
      padding-right: 10px;
    }
  }

  .dialog-footer {
    display: flex;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;

    .van-button {
      flex: 1;
      border-radius: 20px;
      font-weight: 500;
      height: 44px;
      font-size: 16px;
      
      &:first-child {
        background: #fff;
        border: 1px solid #ddd;
        color: #666;
      }
      
      &:last-child {
        background: #1989fa;
        border-color: #1989fa;
        color: #fff;
      }
    }
  }
}

/* 自定义拒绝支付弹窗样式 */
.reject-dialog-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .dialog-header {
    text-align: center;
    h3 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin: 0 0 8px 0;
    }
    p {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }

  .dialog-content {
    .van-field {
      margin-bottom: 10px;
      
      .van-field__label {
        width: 80px;
        color: #333;
        font-weight: 500;
      }
      
      .van-field__body {
        .van-field__control {
          text-align: right;
          padding-right: 10px;
          font-size: 16px;
          color: #333;
        }
      }
    }
  }

  .dialog-footer {
    display: flex;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
  
  .van-button {
      flex: 1;
      border-radius: 20px;
      font-weight: 500;
      height: 44px;
      font-size: 16px;
      
      &:first-child {
        background: #fff;
        border: 1px solid #ddd;
        color: #666;
      }
      
      &:last-child {
        background: #1989fa;
        border-color: #1989fa;
        color: #fff;
      }
    }
  }
}

.detail-card {
  .rejection-info {
    .rejection-record {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      border: 1px solid #f0f0f0;
      
      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f5f5f5;
        
        .record-number {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .record-time {
          font-size: 14px;
          color: #666;
          background: #f8f9fa;
          padding: 4px 8px;
          border-radius: 6px;
        }
      }
      
      .rejection-reason {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 12px 0;
        
        .label {
          color: #666;
          font-size: 14px;
          min-width: 80px;
          font-weight: 500;
        }
        
        .value {
          color: #ff4757;
          font-size: 14px;
          text-align: right;
          flex: 1;
          margin-left: 15px;
          font-weight: 500;
          line-height: 1.4;
        }
      }
    }
    
    .no-rejection-records {
      padding: 30px 20px;
      text-align: center;
      color: #999;
      font-size: 14px;
      background: #fafafa;
      border-radius: 8px;
      border: 1px dashed #ddd;
    }
  }
}

.reupload-section {
  padding: 20px;
  .reupload-btn {
    border-radius: 20px;
    font-weight: 500;
    height: 44px;
    background: #1989fa;
    border-color: #1989fa;
    box-shadow: 0 2px 8px rgba(25, 137, 250, 0.3);
  }
}

/* 重新上传弹窗样式 */
.reupload-dialog-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  .dialog-header {
    text-align: center;
    h3 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin: 0 0 8px 0;
    }
    p {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }
  
  .upload-section {
    .uploader {
    margin-bottom: 15px;
    }
    
    .upload-tip {
      background: #f8f9fa;
      padding: 12px;
      border-radius: 8px;
      font-size: 14px;
      color: #666;
      text-align: center;
      border: 1px dashed #ddd;
    }
  }
  
  .dialog-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    
    .van-button {
      flex: 1;
      height: 44px;
      border-radius: 8px;
      font-size: 16px;
      
      &.cancel-btn {
        background: #fff;
        border: 1px solid #ddd;
        color: #666;
      }
    
      &.confirm-btn {
        background: #1989fa;
        border-color: #1989fa;
      }
    }
  }
}
</style> 